<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 添加按钮 -->
      <el-row type="flex" justify="end">
        <!-- 定义后面的插槽 -->
        <el-button justify="end" float="right" type="success" size="small" @click="addMenu">
          <i class="el-icon-edit" />添加菜单</el-button>
      </el-row>

      <el-card class="tree-card menu_title" :body-style="{height:'100px',lineHeight:'25px',borderBottom:'2px solid #e8e8e8',padding:'20px'}">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="6">
            <span>标题</span>
          </el-col>
          <el-col>
            <span>权限点代码</span>
          </el-col>
          <el-col :span="2">
            <el-row type="flex" justify="end">
              <el-col>
                <span>
                  操作
                </span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-card>

      <el-card>
        <el-tree
          :data="data"
          :props="defaultProps"
          :default-expand-all="true"
          append-child
        >
          <el-row
            slot-scope="{data}"
            type="flex"
            justify="space-between"
            align="middle"
            style="height: 40px;width: 100%;"
          >
            <el-col :span="6">
              <i v-if="data.grade==1" class="el-icon-folder-opened" />
              <i v-else-if="data.grade==2" class="el-icon-document-remove" />
              <i v-else-if="data.grade==3" class="el-icon-view" />
              <i v-else class="el-icon-view" />
              <span style="marginLeft:20px">{{ data.title }}</span>
            </el-col>
            <el-col>

              <el-col>{{ data.code }}</el-col>
              <el-col />

            </el-col>
            <el-col :span="3" style="margin: 10px;">
              <el-row type="flex" justify="end">
                <el-col>
                  <el-button type="primary" icon="el-icon-edit" circle @click="editMune(data.id)" />
                  <el-button type="danger" icon="el-icon-delete" circle @click="deletMune(data.id)" />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tree>
      </el-card>

      <!-- 添加,编辑弹框 -->
      <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
        <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
          <el-form-item label="权限组名称" prop="is_point">
            <el-radio-group v-model="roleForm.is_point" :disabled="title=='创建菜单'? false : true">
              <el-radio :label="false">菜单</el-radio>
              <el-radio :label="true">权限点</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限组名称" prop="id">
            <el-input
              v-model="roleForm.id"
              style="width:50%"
              placeholder="请选择权限组"
              @focus="menuLists"
            />
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="selectNode"
            />

          </el-form-item>

          <el-form-item label="权限代码" prop="code">
            <el-input v-model="roleForm.code" />
          </el-form-item>
          <el-form-item label="权限标题" prop="title">
            <el-input v-model="roleForm.title" />
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { menuList, menuAdd, menuDeletion, menuDetails, menuModification } from '@/api/menu'
import { simplePermissionGroup } from '@/api/permission'

export default {
  data() {
    return {
      titleone: '',
      roleForm: {
        title: '',
        is_point: true,
        code: '',
        pid: '',
        id: ''
      },
      rules: {
        code: [{ required: true, message: '权限代码不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '权限标题不能为空', trigger: 'blur' }]
      },
      radio: '1',
      showDialog: false,
      title: '创建菜单',
      list: [],
      defaultProps: {

        children: 'childs',
          code: 'code',
          label: 'title' // 表示 从这个属性显示内容
      },
      list2: [],
      pid: '',
      id: '',
      tableData: [],
      data: [],
      data1: [],
      data2: []

    }
  },
  created() {
    this.menuLists()
    this.simplePermissionGroup()
  },
  methods: {
    async menuLists() { // 菜单列表
      const res = await menuList()
      this.data = []

      // this.list.map(item => {
      //   if (item.childs !== undefined) {
      //     item.childs.map(item1 => {
      //       if (item1.points !== undefined) {
      //         item1.childs = []
      //         item1.points.map(item2 => {
      //           console.log(item2, 'item2')
      //           this.data1.push(item2)
      //         })
      //       }
      //       this.data2.push(item1)
      //     })
      //   }
      //   this.data.push(item)
      // })
      // // this.data2.push(...this.data1)
      // this.data2.push(...this.data1)
      // console.log(this.data, 'this.data')
      // console.log(this.list, '菜单列表')
      // a = {
      //   b:1
      // }
      // a.b =1

      res.forEach(item1 => {
        if (item1.childs) {
          item1.childs.forEach(item2 => {
            if (item2.points) {
              console.log(item2, 'item2')
              item2.childs = item2.points
            }
          })
        }
      })
      res.forEach(item1 => {
        item1.grade = 1
        if (item1.childs) {
          item1.childs.forEach(item2 => {
            if (item2.childs) {
              item2.grade = 2
              item2.childs.forEach(item3 => {
                item3.grade = 3
              })
            }
          })
        }
      })
      this.data = res
      console.log(this.data)
    },
    async simplePermissionGroup() { // 权限组简单列表
      const res = await simplePermissionGroup()
      this.list2 = res
    },
    // 确定
     btnOK() {
      this.$refs.roleForm.validate(async(flag) => {
      if (flag) {
        if (this.title === '编辑菜单') {
        this.roleForm.id = this.id
        await menuModification(this.roleForm)
      } else { // 新增
        this.roleForm.pid = this.pid
          this.roleForm.id = ''

          console.log(this.roleForm, '55555555555555568979')
        // return
      await menuAdd(this.roleForm)
      }
      this.roleForm = {
        title: '',
        is_point: true,
        code: '',
        pid: '',
        id: ''
        }

        this.showDialog = false
      this.menuLists()
        // window.location.reload()// 强制刷新
     this.$message.success('操作成功')
      } else {
        this.$message.info('需要填写完整哦')
      }
     })
    },
    btnCancel() { // 取消按钮
    this.roleForm = {
        title: '',
        is_point: false,
        code: '',
        pid: '',
        id: ''
      }
      this.list2.title = ''
      this.$refs.roleForm.resetFields()
      this.showDialog = false
    },
     addMenu() { // 添加菜单按钮
      this.title = '创建菜单'
       this.showDialog = true
    },
    async editMune(id) { // 编辑菜单按钮
      this.title = '编辑菜单'
      this.id = id
      // 获取当前详情
      const rerrrs = await menuDetails(id)
      console.log(rerrrs, 'rerrrsrerrrs')
      const rew = await menuList()// 获取所有菜单
      this.showDialog = true
      function fn2(arr, pid = '', list = []) {
      arr.forEach((item) => {
        list.push(item)
        if (item.childs && item.childs.length !== 0) {
          fn2(item.childs, item.id, list)
        }
      })
      return list
      }
      // res是转平之后的数据
      const res = fn2(rew)
      // arr当前父级的数据
      const arr = res.filter(item => item.id === rerrrs.pid)
      console.log(arr, 'arr')
      if (arr.length === 0) {
        this.titleone = '主导航'
      } else {
        this.titleone = arr[0].title
      }

     const data = {
        code: rerrrs.code, // 当前
        is_point: rerrrs.is_point, // 当前
        title: rerrrs.title, // 当前
        id: this.titleone, // 父级
        pid: rerrrs.pid
      }
      this.roleForm = data
      console.log(this.roleForm, '1111111111')
     },
    async deletMune(id) { // 菜单删除
 try {
  await this.$confirm('确定要删除吗')
      await menuDeletion(id)
      // window.location.reload()
           this.menuLists()

     this.$message.success('删除成功')
 } catch (error) {
  console.error('取消删除')
 }
    },
    selectNode(node) { // 部门
      console.log(node, 'node')
      if (node.pid === null) {
        this.pid = node.pid
      } else {
        this.pid = node.id
      }
      this.roleForm.id = node.title
       }
  }
}
</script>
<style scoped>
 .menu_title{
  margin-top: 20px;
  color: #909399;
  background-color: #fafafa;
  height:60px;
  line-height: 50px;
}
/deep/ .el-tree-node__content {
  height: 45px;
}
</style>
